import { useState, Fragment } from 'react'
import { Select } from 'antd'
import IconFont from '@/components/IconFont'
import { themes } from '@/pages/bi-core/utils/const'

const { Option } = Select

const ThemePicker = (props) => {
  const { options, ...opt } = props
  const [open, setOpen] = useState(false)

  return (
    <Select
      {...opt}
      open={open}
      onDropdownVisibleChange={(open) => setOpen(open)}
      size="small"
      dropdownClassName="bi-core-dropdown"
      suffixIcon={
        <IconFont
          className="icon-color-base"
          type="icon-drop-down"
          onClick={() => setOpen(!open)}
        />
      }
    >
      {themes.map(({ label, value, colors }) => (
        <Option key={value} value={value}>
          <div className="theme__chart">
            {colors.map((color) => (
              <Fragment key={color}>
                <div className="theme__color" key={color} style={{ background: color }} />
              </Fragment>
            ))}
            <div className="theme__title">{label}</div>
          </div>
        </Option>
      ))}
    </Select>
  )
}

export default ThemePicker
